<template>
  <div class="region" :v-if="regionShow">
    <div id="region-tab">
      <ul class="tab">
        <li
          :class="!subwayChosen ? 'item chosen' : 'item'"
          @click="changeChosen"
        >
          商区
        </li>
        <li
          :class="subwayChosen ? 'item chosen' : 'item'"
          @click="changeChosen"
        >
          地铁站
        </li>
      </ul>
    </div>
    <div id="region-list">
      <div id="region-sidenav">
        <div id="district">
          <div
            :class="
              (subwayChosen && lineId == item.id) ||
              (!subwayChosen && districtId == item.id)
                ? 'district-li item chosen'
                : 'district-li item'
            "
            v-for="(item, index) in List.subItems"
            :key="item.id"
            @click="ListChosen(item, index)"
          >
            {{ item.name }}({{ item.count }})
          </div>
        </div>
      </div>
      <div id="region-list-item">
        <div id="filter-list">
          <div
            :class="
              (subwayChosen && stationId == item.id) ||
              (!subwayChosen && areaId == item.id)
                ? 'item chosen'
                : 'item'
            "
            v-for="item in ListItemArr"
            :key="item.id"
            @click="ListItemChosen(item)"
          >
            <span class="item-name">{{ item.name }}</span
            ><span class="item-count">{{ item.count }}</span>
          </div>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Region",
  props: {
    regionShow: {
      type: Boolean,
      default: false,
    },
    district: {
      type: Object,
    },
    subway: {
      type: Object,
    },
    cinemaVal: {
      type: Object,
    },
  },
  data() {
    return {
      subwayChosen: this.cinemaVal.lineId == -1 ? false : true,
      List: this.cinemaVal.lineId != -1 ? this.subway : this.district,
      lineId: this.cinemaVal.lineId,
      districtId: this.cinemaVal.districtId,
      areaId: this.cinemaVal.areaId,
      stationId: this.cinemaVal.stationId,
      RegionIndex: 0,
      ListItemArr:
        (this.cinemaVal.lineId != -1
          ? this.subway.subItems[this.cinemaVal.RegionIndex].subItems
          : this.district.subItems[this.cinemaVal.RegionIndex].subItems) || {},
    };
  },
  methods: {
    changeChosen() {
      this.subwayChosen = !this.subwayChosen;
      this.ListItemArr = {};
      if (this.subwayChosen) {
        this.List = this.subway;
      } else {
        this.List = this.district;
      }
    },
    ListChosen(obj, index) {
      if (this.subwayChosen) {
        this.lineId = obj.id;
      } else {
        this.districtId = obj.id;
      }
      this.ListItemArr = obj.subItems;
      this.RegionIndex = index;
    },
    ListItemChosen(obj) {
      if (this.subwayChosen) {
        this.cinemaVal["lineId"] = this.lineId;
        this.cinemaVal["stationId"] = obj.id;
        this.cinemaVal["districtId"] = -1;
        this.cinemaVal["areaId"] = -1;
      } else {
        this.cinemaVal["districtId"] = this.districtId;
        this.cinemaVal["areaId"] = obj.id;
        this.cinemaVal["lineId"] = -1;
        this.cinemaVal["stationId"] = -1;
      }
      this.cinemaVal["RegionIndex"] = this.RegionIndex;
      this.cinemaVal["regionName"] = obj.name;
      this.$emit("cinemaVal", this.cinemaVal);
    },
  },
};
</script>

<style lang="scss" scoped>
.region {
  font-size: 16px;
  background-color: #fff;
  overflow: auto;
  z-index: 999;
  #region-tab {
    height: 1.88rem;
    .tab {
      display: flex;
      text-align: center;
      .chosen {
        color: #f03d37;
      }
      .chosen::after {
        content: "";
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        width: 90%;
        border-top: 0.04rem solid #f03d37;
      }
      li {
        position: relative;
        display: inline-block;
        padding: 0 0.2rem;
        width: 50%;
        height: 100%;
        line-height: 1.88rem;
        text-align: center;
      }
    }
  }
  #region-list {
    background: #f5f5f5;
    height: 14rem;
    #region-sidenav {
      width: 35%;
      height: 100%;
      float: left;
      overflow: scroll;
      #district {
        min-height: 100%;
        background: #fff;
        .district-li {
          height: 1.88rem;
          padding-left: 0.2rem;
          line-height: 1.88rem;
          font-size: 0.28rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .item {
          border: 0;
          padding: 0 0.3rem;
        }
        .chosen {
          color: #f03d37;
          background: #f5f5f5;
        }
      }
    }
    #region-list-item {
      width: 65%;
      height: 100%;
      float: right;
      overflow: scroll;
      #filter-list {
        background: #f5f5f5;
        .chosen {
          color: #f03d37;
          span.item-name {
            color: #f03d37;
          }
          span.item-count {
            color: #f03d37;
          }
        }
        .chosen::before {
          content: "";
          display: block;
          position: absolute;
          left: 0.36rem;
          top: 0.58rem;
          width: 0.63rem;
          height: 0.66rem;
          background-image: url(//s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/cinemaList/img/base/base64/chosen.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .item {
          position: relative;
          height: 1.9rem;
          line-height: 1.9rem;
          padding: 0 0 0 1.5rem;
          font-size: 0.3rem;
          span {
            display: inline-block;
          }
          .item-name {
            width: 80%;
            font-size: 0.28rem;
            color: #333;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .item-count {
            float: right;
            width: 1.4rem;
            margin-right: 0.2rem;
            color: #8f9296;
            font-size: 0.24rem;
            text-align: right;
          }
        }
      }
    }
    .clearfix {
      clear: both;
    }
    .clearfix:after,
    .clearfix:before {
      content: " ";
      display: table;
    }
  }
}
</style>